import React, { useEffect } from 'react';
import { Button, message } from 'antd';
import { withRouter } from 'umi';
import { BottomAction } from '@/components';
import { useRequest, defaultFormatResult } from '@/hooks';
import EmployeeCard from '@/pages/EntryManage/components/EmployeeCard';
import useCandidateProcess from '@/pages/EntryManage/hooks/useCandidateProcess';
import Card from '../components/Card';
import { fetchDepartmentEmployeeInfo, departmentAcceptEmployee } from '../services';
import { replaceToWaitEntry } from '../utils';
import styles from './index.less';

// 入职环节5;
const PROCESS_STATUS = 7;

/**
 * 员工确认
 */
const ConfirmReceipt = ({ location }) => {
    const { query = {} } = location;
    const { entryPersonnelCode } = query;

    const user = JSON.parse(localStorage.getItem('user') || '{}');
    const { employeeCode } = user;

    const canAction = useCandidateProcess(entryPersonnelCode, PROCESS_STATUS, employeeCode);

    // 获取员工确认信息
    const { run: getDepartmentEmployeeInfo, data = {} } = useRequest(code => fetchDepartmentEmployeeInfo(code), {
        manual: true,
        ...defaultFormatResult
    });

    // 确定
    const { run: runDepartmentAcceptEmployee, loading } = useRequest(
        () => departmentAcceptEmployee({ currentHandlerEmployeeCode: employeeCode, entryPersonnelCode }),
        {
            manual: true
        }
    );

    const { officeStationVO = {}, employeeBusinessInfoVO = {} } = data;
    const { officeLocationName, stationName } = officeStationVO;
    const { teacherName, workArrange } = employeeBusinessInfoVO;

    // 获取工位信息
    useEffect(() => {
        if (entryPersonnelCode) {
            getDepartmentEmployeeInfo(entryPersonnelCode);
        } else {
            replaceToWaitEntry('参数错误');
        }
    }, [entryPersonnelCode, getDepartmentEmployeeInfo]);

    const handleClick = async () => {
        const { code, msg } = await runDepartmentAcceptEmployee();
        if (code === 10000) {
            message.success(msg);
            replaceToWaitEntry();
        } else {
            message.error(msg);
        }
    };
    return (
        <div className={styles.confirmReceiptWrapper}>
            <div className={styles.employeeInfo}>
                <div className={styles.employeeInfoBox}>
                    <EmployeeCard employeeCode={entryPersonnelCode} />
                </div>
            </div>
            <Card title="工位安排" headBorder bordered={false}>
                <div className={styles.workDesk}>
                    <span>
                        请将新员工引导到如下工位：
                        <span className={styles.darkColor}>
                            {officeLocationName || stationName ? `${officeLocationName} ${stationName}` : '--'}
                        </span>
                    </span>
                </div>
            </Card>
            <div className={styles.line}></div>
            <Card
                title="工作安排"
                headBorder
                bordered={false}
                extra={
                    canAction && (
                        <BottomAction>
                            <Button
                                onClick={() => {
                                    replaceToWaitEntry();
                                }}
                            >
                                取消
                            </Button>
                            <Button type="primary" onClick={handleClick} loading={loading}>
                                确定
                            </Button>
                        </BottomAction>
                    )
                }
            >
                <div className={styles.workTodo}>
                    <div className={styles.workTodoList}>
                        <span>带教人：</span>
                        <span className={styles.darkColor}>{teacherName}</span>
                    </div>
                    <div className={styles.workTodoList}>
                        <span>工作安排：</span>
                        <div
                            className={styles.darkColor}
                            // eslint-disable-next-line react/no-danger
                            dangerouslySetInnerHTML={{
                                __html: workArrange && workArrange.replace(/(\r\n|\n|\r)/gm, '<br />')
                            }}
                        />
                    </div>
                </div>
            </Card>
        </div>
    );
};

export default withRouter(ConfirmReceipt);
